<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bar-background&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEWgF0SAXz7pyOfEVSkylGrIBujADZLaFq7DxURlSEsKL8xI6CwmIAjABMAAw8sIlJsDEArGkAHGkA7Akmfo4U1HQARowcvOHoeNrAAO4AQoz0ANasHMAK0AJEYBxKxaSVHV09fQDKFB4uDpHo9MAenHQcrJUAFDG5ybtpB8kJAHRxAJQ-i-bhN-hm5gDcQA
	⚠ 请注意，该图表不是 Apache ECharts 官方示例，而是由用户代码生成的。请注意鉴别其内容。
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <script src="assets/js/jquery-3.3.1.min.js"></script>

  <script type="text/javascript">
    
    // 获取学生成绩数据
    $.ajax({
        type: "POST",//方法类型
        dataType: "json",//预期服务器返回的数据类型
        url: "/score/getMyScoreAccount",//url
        data: {},
        success: function (result) {
            if (result.code === "0") {
              // 处理成功返回的数据
              console.log(result.data);
              let dom = document.getElementById('container');
              let myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
              });
              let app = {};
              let option;


              let subjectNames = [];
              for (let i = 0; i < result.data.length; i++) {
                subjectNames.push(result.data[i].subjectName);
              }
              let subjectScores = [];
              for (let i = 0; i < result.data.length; i++) {
                subjectScores.push(result.data[i].score);
              }

              option = {
                xAxis: {
                  type: 'category',
                  data: subjectNames
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    data: subjectScores,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                      color: 'rgba(180, 180, 180, 0.2)'
                    }
                  }
                ]
              };

              if (option && typeof option === 'object') {
                myChart.setOption(option);
              }

              window.addEventListener('resize', myChart.resize);
              
            } else{
                alert(result.msg);
            }
        }
    });
    

  </script>
</body>
</html>